<template>
	<view class="tag">
		<view class="coupon">
			<view class="coupon-left"><text class="font-bold font-size-38">30</text><text
					class="font-bold font-size-20">￥</text></view>
			<view class="coupon-con pd-10">
				<view class="font-bold font-size-14 "> 优惠券名称 </view>
				<view class=" font-size-12 "> <text>过期时间</text>:<text>222-10-01 10:22</text> </view>

			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.tag {

		box-sizing: border-box;
		margin: 0;
		padding: 10px;
		height: 100%;
	}

	.coupon {
		display: flex;
		overflow: hidden;
		border-radius: 10px;
	}

	.coupon-left {
		flex: 1;
		height: 100px;
		background: $u-primary;
		background: radial-gradient(circle at right top, transparent 10px, $u-primary 10px);
		text-align: center;
		line-height: 100px;

		color: #fff;

	}

	.coupon-con {

		flex: 1 100px;

		background: #fff;
		position: relative;
		overflow: hidden;
		background: radial-gradient(circle at left top, transparent 10px, #fff 10px);

	}

	.con {
		border-radius: -10px;
	}

	/*为了减少html的结构，我们使用伪元素*/
	.coupon-left::before {

		clip: rect(0, 210px, 285px, 0);
	}
</style>
